<template>
  <router-link
    tag="div"
    class="helper-item"
    :to="to"
  >
    <i class="icon" :style="{backgroundImage:`url('${icon}')`}"></i>
    <span class="text">{{text}}</span>
  </router-link>
</template>

<script>
export default {
  name: 'helper-item',
  props: {
    icon: String,
    text: String,
    to: { required: false }
  }
}
</script>

<style lang="stylus">
$icon-size = 40px;

.helper-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  >.icon {
    width: $icon-size;
    height: $icon-size;
    background: center / cover no-repeat;
  }

  >.text {
    margin-top: 10px;
    font-size: 14px;
  }
}
</style>
